<template>
  <main class="card">
    <NGrid cols="1" y-gap="10">
      <NGridItem>
        <NCard title="欢迎使用自主学习平台">
          使用说明：
          <NSpace>
            <n-progress type="circle" :percentage="25" />
            <n-steps vertical :current="1" :status="'process'">
              <n-step title="方向选择" description="在“学习路线”中选择你的兴趣方向" @click="handleChooseDirection" />
              <n-step title="知识学习" description="根据选择进行知识，系统会智能推荐学习资源" />
              <n-step title="过程展示" description="在“博文”中提交自己的学习心得体会等" />
            </n-steps>
          </NSpace>
        </NCard>
      </NGridItem>
      <NGridItem>
        <AiGuide/>
      </NGridItem>
    </NGrid>
  </main>
</template>

<script setup lang="ts">
import { NGrid, NGridItem, NCard, NProgress, NSteps, NStep, NSpace } from "naive-ui";
import { useRouter } from 'vue-router';


import AiGuide from "@/components/AiGuide.vue";


import StudyMap from "@/components/StudyMap.vue";

const router = useRouter();

function handleChooseDirection() {
  router.push("/direction");
}
</script>

<style scoped>
@media (max-width: 599px) {
  .card {
    width: calc(599px - 20px);
    max-width: 100%;
    margin: auto;
  }
}

/* 当视口宽度大于或等于600px时 */
@media (min-width: 600px) {
  .card {
    width: calc(100% - 20px);
    margin-left: 10px;
    margin-right: 10px;
  }
}

.card {
  margin-top: 1rem;
}
</style>
